<template>
  <a-layout>
    <a-layout-content style="height: calc(100vh - 88px); padding: 2px">
      <VxeBasicTable
        ref="tableRef"
        v-bind="gridOptions"
        v-on="gridEvents(null)"
      >
        <template #title_default="{ row }">
          <component v-if="row.icon" :is="row.icon" />
          <span style="padding-left: 8px">{{ t(row.title) }}</span>
        </template>
        <template #toolbar_buttons>
          <ToolButtons
            :filter-call="handleOpenFilter"
            :create-call="handleEdit"
            :delete-call="handleDelete"
            :show-delete="false"
            :show-export="false"
            :show-import="false"
            :show-filter="false"
          />
        </template>

        <template #action="{ row }">
          <TableAction
            :record="row"
            @edit="handleEdit"
            @delete="handleDelete"
          />
        </template>
      </VxeBasicTable>
    </a-layout-content>
    <menu-edit
      v-model:visible="showEdit"
      :data="current"
      :parent-id="parentId"
      :menu-list="menuData"
      @done="reload"
    />
    <TableFilter
      ref="tableFilterRef"
      @done="tableRef?.commitProxy('query')"
      v-model:visible="ifSHowFilter"
      :filter-cols="vxeColumn"
    />
  </a-layout>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { message } from 'ant-design-vue/es';
  import {
    BasicTableProps,
    VxeBasicTable,
    VxeGridListeners
  } from '@/components/VxeTable';
  import { messageLoading } from 'ele-admin-pro/es';
  import MenuEdit from './components/menu-edit.vue';
  import { listMenus, removeMenu } from '@/api/system/menu';
  import type { Menu } from '@/api/system/menu/model';
  import config from './config';
  import TableFilter from '@/components/TableFilter/index.vue';
  import { useI18n } from 'vue-i18n';

  const { t } = useI18n();

  const { TableAction, ToolButtons, vxeColumn, tableRef } = config;
  const tableFilterRef = ref<InstanceType<typeof TableFilter>>();
  const ifSHowFilter = ref(false);
  const gridOptions = reactive<BasicTableProps>({
    keepSource: true,
    showOverflow: '',
    stripe: false,
    treeConfig: {
      rowField: 'id',
      parentField: 'pid',
      iconOpen: 'vxe-icon-square-minus',
      iconClose: 'vxe-icon-square-plus'
    },
    columns: vxeColumn,
    height: 'auto',
    pagerConfig: {
      enabled: false
    },
    proxyConfig: {
      ajax: {
        query: async ({ form }) => {
          form.ConModels = tableFilterRef.value?.conModelsJson;
          const data = await listMenus({ ...form });
          menuData.value = data;
          return data;
        }
      }
    }
  });
  const gridEvents = (openFilterModal) => {
    return {
      toolbarToolClick({ code }) {
        if (code == 'customFilter') {
          openFilterModal(true, {
            columns: vxeColumn
          });
        }
      }
    } as VxeGridListeners;
  };
  // 表格列配置

  // 当前编辑数据
  const current = ref<Menu | null>(null);

  // 是否显示编辑弹窗
  const showEdit = ref(false);

  // 上级菜单id
  const parentId = ref<number>();

  // 菜单数据
  const menuData = ref<Menu[] | undefined>([]);

  /* 刷新表格 */
  const reload = () => {
    tableRef.value?.commitProxy('query');
  };

  /* 打开编辑弹窗 */
  const handleEdit = (row?: Menu | null) => {
    current.value = row ?? null;
    parentId.value = row?.id;
    showEdit.value = true;
  };

  const handleOpenFilter = () => {
    ifSHowFilter.value = true;
  };

  /* 删除单个 */
  const handleDelete = (row: Menu) => {
    if (row.children?.length) {
      message.error('请先删除子节点');
      return;
    }
    const hide = messageLoading('请求中..', 0);
    removeMenu(row.id)
      .then((msg) => {
        hide();
        message.success(msg);
        reload();
      })
      .catch((e) => {
        hide();
        message.error(e.message);
      });
  };
</script>

<script lang="ts">
  import * as MenuIcons from '@/layout/menu-icons';

  export default {
    name: 'SystemMenu',
    components: MenuIcons
  };
</script>
